<script setup lang="ts">
import { Accounts, User } from '$/client'
import { logoutDialog, middlewares } from '$/client-core'
import ComCtl from '@/components/ComCtl.vue'
import router from '@/router'
import { curls, urls } from '@/router/urls'
import { Users } from '@/scripts/client-copilot'
import { useLoginStore } from '@/stores/loginStore'
import {
  BitcoinB as IBitcoinB,
  ClipboardList as IClipboardList,
  Gear as IGear,
  RightFromBracket as IRightFromBracket
} from '@vexip-ui/icons'
import { useRequest } from 'alova/client'
import Cookies from 'js-cookie'
import { Breadcrumb, Layout } from 'vexip-ui'

const login = useLoginStore()

const { send: logout } = useRequest(Accounts.logout, {
  immediate: false,
  middleware: middlewares(logoutDialog)
}).onSuccess(() => {
  login.$reset()
  Cookies.remove('token')
  router.push(urls.index)
})
const { data: user } = useRequest(Users.retrieve, {
  initialData: User.inst()
})
</script>

<template>
  <ComCtl content-padding="">
    <Layout
      logo="/logo.svg"
      sign-name="小季陪玩店 V1"
      :config="['color', 'nav']"
      @menu-select="$router.push"
      @user-action="(v) => (v == 'logout' ? logout() : router.push(v))"
      :user="{
        name: user.name,
        avatar: user.avatar
      }"
      :menus="[
        {
          label: curls.comment,
          name: '评论',
          icon: IBitcoinB
        },
        {
          label: curls.order,
          name: '订单',
          icon: IClipboardList
        }
      ]"
      :actions="[
        {
          label: curls.settings,
          icon: IGear,
          name: '帐号设置'
        },
        {
          label: 'logout',
          name: '退出登录',
          icon: IRightFromBracket
        }
      ]"
      dark-mode
      fit-window
      fixed-main
    >
      <template #header-main>
        <div class="hidden sm:inline">
          <Breadcrumb :router="router" />
        </div>
      </template>
      <template #main>
        <RouterView class="w-full h-full overflow-auto bg-[#121212]" v-slot="{ Component }">
          <Transition name="vxp-fade" mode="out-in">
            <component :is="Component" />
          </Transition>
        </RouterView>
      </template>
    </Layout>
  </ComCtl>
</template>
